import React from 'react';
import store from './store';
import './index.css';
import { TITLES } from '../../resources/titles';

import { Table, Layout} from 'element-react';
import { Link } from 'react-router-dom';
import * as echarts from 'echarts';

const taskList=TITLES.map((t) => {return {'task':t.title, 'introduction':t.introduction}});
const { ipcRenderer } = require('electron');

// @observer
class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columns: [
        {
          label: "任务",
          prop: "task",
          width: 320,
          // fixed: 'left'
          zip: 200333
        },
        {
          label: "操作",
          prop: "zip",
          // fixed: 'right',
          width: 80,
          zip: 200333,
          render: (row, column, index)=>{
            return <span><Link to={{pathname:'/WriteBoard', state:{title:TITLES[index].title, introduction:TITLES[index].introduction}}}>写作</Link></span>
          }
        }
      ]
    }
  }

  componentDidMount() {
    store.initValue();

    ipcRenderer.send('query-historyOnlineTime');
    ipcRenderer.once('query-historyOnlineTime-reply', function (event, data) {
      const onlineTime = Object.entries(data).sort((a, b) => a[0].localeCompare(b[0]));
      const option = {
        title: {
          text: '在线时间统计',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: onlineTime.map(t=>t[0]),
          name: '日期',
          axisLabel: {
            fontSize: 6
          },
          nameTextStyle: {
            fontSize: 6
          }
        },
        yAxis: {
          type: 'value',
          name: '时长/分钟',
          axisLabel: {
            fontSize: 6
          },
          nameTextStyle: {
            fontSize: 6
          }
        },
        series: [
          {
            data: onlineTime.map(t=>t[1]),
            type: 'line',
            areaStyle: {},
            itemStyle: {
              normal: {
                  color: 'green', // 点的颜色
                  lineStyle: {
                      color: 'green' // 线的颜色
                  }
                }
            },
          }
        ]
      };
      
      var myChart = echarts.init(document.getElementById('chart7863w6aslikfc'));
      myChart.setOption(option);
    })

    ipcRenderer.send('query-historyArticleSubmit');
    ipcRenderer.once('query-historyArticleSubmit-reply', function (event, data) {
      const articleSubmit = Object.entries(data).sort((a, b) => a[0].localeCompare(b[0]));
      const option = {
        title: {
          text: '提交篇数统计',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: articleSubmit.map(t=>t[0]),
          name: '日期',
          axisLabel: {
            fontSize: 6
          },
          nameTextStyle: {
            fontSize: 6
          }
        },
        yAxis: {
          type: 'value',
          name: '提交篇数',
          axisLabel: {
            fontSize: 6
          },
          nameTextStyle: {
            fontSize: 6
          }
        },
        series: [
          {
            data: articleSubmit.map(t=>t[1]),
            type: 'line',
            areaStyle: {},
            itemStyle: {
              normal: {
                  color: 'blue', // 点的颜色
                  lineStyle: {
                      color: 'blue' // 线的颜色
                  }
                }
            },
          }
        ]
      };
      
      var myChart = echarts.init(document.getElementById('chart7863w6aslikfs'));
      myChart.setOption(option);
    })
  }

  render() {
    return (
      <div className="content">
        <Layout.Row gutter="20">
          <Layout.Col span="12">
            <Table
              style={{width: 420}}
              columns={this.state.columns}
              data={taskList}
              border={true}
              height={500}
            />
          </Layout.Col>
          <Layout.Col span="12">
            <div style={{height:500}}>
              <div id='chart7863w6aslikfc' style = { {width:"80%",  height: 250 }}></div>
              <div id='chart7863w6aslikfs' style = { {width:"80%",  height: 250 }}></div>
            </div>
          </Layout.Col>
        </Layout.Row>
      </div>
    );
  }
}

export default Home;